<template>
  <div :class="className" :id="id" :style="{height:height,width:width}"/>
</template>

<script>
import echarts from 'echarts'
import resize from './mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart3'
    },
    id: {
      type: String,
      default: 'chart3'
    },
    width: {
      type: String,
      default: '200px'
    },
    height: {
      type: String,
      default: '200px'
    }
  },
  data() {
    return {
      chart: null,
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id))

      this.chart.setOption({
        backgroundColor: '#ededed',         // 背景色，默认无背景	rgba(51,255,255,0.7)
        title: {
          // top: 20,
          top: '5%',
          left: '1%',
          text: '饼状图',
          textStyle: {
            // fontWeight: 'normal',
            fontSize: 20,
            color: '#2d7d75'
          },
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}: {c} <br/> ({d}%)"
        },

        //图例
        legend: {
          show: true,
          x: '5%',
          data: [ '3个月内', '3-6分', '51-70分', '71-80分', '81-100分'],
          left : '10%',                   // 图例距离左侧边距
          top : '35%',                    // 图例距离顶部边距
          // icon: 'circle',                   // 图例项的 icon。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'也可以通过 'image://url' 设置为图片，其中 url 为图片的链接，或者 dataURI。可以通过 'path://' 将图标设置为任意的矢量路径。
          itemWidth: 25,                  // 图例标记的图形宽度。[ default: 25 ]
          itemHeight: 14,                 // 图例标记的图形高度。[ default: 14 ]
          itemGap: 20,                	// 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
          orient: 'vertical',             // 图例列表的布局朝向,'horizontal'为横向,'vertical'为纵向.
          textStyle: {                    // 图例的公用文本样式。
            fontSize: 20,
            color: '#90979c',
            fontWeight: 'bold'
          },
        },
        series: [
          {
            name: '库龄分析',
            type: 'pie',
            radius: '70%',    //直径
            center: ['50%', '50%'],
            avoidLabelOverlap: false,

            labelLine:{   //指示线长度
              normal:{
                length:50
              }
            },
            data: [
              {value:1, name:'3个月内'},
              {value:3, name:'3-6分'},
              {value:24, name:'51-70分'},
              {value:7, name:'71-80分'},
              {value:3, name:'81-100分'},
            ],

          }
        ]
      })
    }
  }
}
</script>
